<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/index/home' }">首页</el-breadcrumb-item>
        </el-breadcrumb>
        
        <el-row class="margintop20">
            <el-col class="a2">
                <el-carousel 
                    class="myswiper">
                    <el-carousel-item v-for="(item,i) in banner" :key="i">
                        <div class="mydiv">
                            <img :src="item.imgUrl" alt="">
                            <h4 class="text">{{item.text}}</h4>
                        </div>
                    </el-carousel-item >
                </el-carousel>
            </el-col>
            <Calendar class="a1"></Calendar>
            <Player></Player>
        </el-row>
        
    </div>
</template>

<script>
import Player from 'zw-player'
import {gethomebanner2} from "@/api";
import {mapState,mapMutations} from "vuex"
import Calendar from 'vue-calendar-component';
export default {
    data(){
        return {
            //banner:[]
        }
    },
    computed:{
        ...mapState(['banner'])
    },
    methods:{
        ...mapMutations(['changeBanner'])  // this.changeBanner = store.commit('changeBanner')
    },
    mounted(){
        // vuex 缓存优化 
        if(!this.banner){
            gethomebanner2()
            .then(res=>{
                if(res.type){
                    // this.banner = res.result;
                    this.changeBanner(res.result)
                }
            })
        }
    },
    components: {
        Calendar,
        Player
    }
}
</script>

<style lang="scss">
.a2{
    width:75%;
}
.myswiper{
    width:100%;
    float: left;
    .mydiv{
        width:100%;
        position: relative;
        height:500px;
        img{
            width:100%;
            height:500px;

        }
        .text{
            position: absolute;
            width:100%;
            height:350px;
            top:0;
            left:0;
            font-size: 40px;
            color:#fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
.el-carousel__container{
    height: 450px;
}
.a1{
    float: right;
    width: 24%;
}
.bbox{
    bottom:120px;
    right: 100px;
}
</style>